import React from "./core/React.js";
let fooCount = 1;
function Foo() {
  console.log("Foo rerender");
  const update = React.update();
  function handleClick() {
    fooCount++;
    update();
  }
  return (
    <div>
      foo count: {fooCount}
      <div>
        <button onClick={handleClick}>click</button>
      </div>
    </div>
  );
}
let barCount = 1;
function Bar() {
  console.log("Bar rerender");
  const update = React.update();
  function handleClick() {
    barCount++;
    update();
  }
  return (
    <div>
      Bar count: {barCount}
      <div>
        <button onClick={handleClick}>click</button>
      </div>
    </div>
  );
}
let countRoot = 1;
function App() {
  console.log("app rerender");
  const update = React.update();
  function handleClick() {
    countRoot++;
    update();
  }
  return (
    <div id="app">
      mini-react-app count: {countRoot}
      <button onClick={handleClick}>click</button>
      <Foo></Foo>
      <Bar></Bar>
    </div>
  );
}
export default App;
